﻿<template id="layout_menu_template">
    <el-scrollbar class="layout-menu-scrollbar" v-show="!isSmallWidth">
        <el-menu class="layout-menu" default-active="menu_1" :collapse="collapse" :mode="isSmallWidth?'horizontal':'vertical'" menu-trigger="click" ref="menuRef">
            <layout_menu_item v-for="menu in roots" :key="menu.Id" :menus="menus" :menu="menu" v-on:menu-click="menuClick"></layout_menu_item>
        </el-menu>
    </el-scrollbar>
</template>
<script type="text/javascript">
    var layout_menu = {
        template: "#layout_menu_template",
        data() {
            return {
                initRoots: [{
                    Id: 1,
                    Pid: 0,
                    Title: "系统首页",
                    Icon: "house",
                    Type: "href",
                    Src: "/work/home/welcome"
                }],
                roots: [],
                menus: []
            }
        },
        props: ["collapse", "isSmallWidth"],
        methods: {
            init() {
                var that = this;
                that.roots = that.initRoots;
                $.ajax({
                    url: "/work/home/getmenu",
                    type: "get",
                    dataType: "json",
                    success(result) {
                        that.menus = that.roots.concat(result.data);
                        that.roots = that.menus.filter(m => {
                            return m.Pid == 0;
                        });
                        that.$emit("menu-click", that.roots[0]);
                    }
                });
            },
            menuClick(item) {
                this.$emit("menu-click", item);
            },
            open() {
                $(".el-tooltip__trigger", this.$refs.menuRef.$el).click();
            }
        },
        mounted() { this.init(); }
    };
</script>